<!-- 搜索组件 -->
<template>
  <div class="my-search">
    <div class="my-search__box" v-if="searchData.searchForm">

      <div v-for="(item, index) in searchData.searchForm" :index="index" class="my-search__box__text"
        :style="{ width: item.width }">
        <template v-if="(item.hide && item.hide(item.value)) || !item.hide">

          <span v-if="item.label && item.labelShow" :style="{ width: item.labelWidth }"
            class="my-search__box__text__span">{{
      item.label
    }}</span>
          <el-input v-if="item.styleType == 'input'" v-model="item.value" :placeholder="item.placeholder"
            :clearable="!item.clearable" :disabled="loading" :style="{ width: item.inputWidth }" size="large" />
          <el-select v-if="item.styleType == 'select'" v-model="item.value" :placeholder="item.placeholder" size="large"
            :clearable="!item.clearable" :disabled="loading">
            <el-option :label="v.label" :value="v.value" v-for="v in item.data" :index="v.value" />
          </el-select>
          <el-date-picker v-if="item.styleType == 'date' && item.type !== 'daterange' && item.type !== 'datetimerange'"
            v-model="item.value" :type="item.type" :format="item.format" :disabled="loading"
            :clearable="!item.clearable" :value-format="item.valueFormat" :placeholder="item.placeholder"
            size="large" />
          <el-date-picker
            v-if="item.styleType == 'date' && (item.type === 'daterange' || item.type === 'datetimerange')"
            v-model="item.value" :type="item.type" :format="item.format" :disabled="loading"
            :start-placeholder="item.startPlaceholder" :end-placeholder="item.endPlaceholder"
            :value-format="item.valueFormat" :clearable="!item.clearable" size="large" />
          <el-time-select v-if="item.styleType == 'time'" v-model="item.value" :format="item.format" :start="item.start"
            :step="item.step" :end="item.end" :disabled="loading" :placeholder="item.placeholder" size="large" />
          <el-switch v-if="item.styleType == 'switch'" v-model="item.value" :disabled="loading" />
          <el-checkbox-group v-if="item.styleType == 'checkbox'" v-model="item.value" :disabled="loading">
            <el-checkbox :label="v.value" v-for="v in item.data" :index="v.value" size="large">{{ v.label
              }}</el-checkbox>
          </el-checkbox-group>
          <el-radio-group v-if="item.styleType == 'radio'" v-model="item.value" :disabled="loading">
            <el-radio :label="v.value" v-for="v in item.data" :index="v.value" size="large">{{ v.label }}</el-radio>
          </el-radio-group>
          <div v-if="item.styleType == 'slot'">
            <slot :name="item.key"></slot>
          </div>
        </template>

      </div>
      <div class="my-search__box__btn">
        <el-button type="primary" :disabled="loading" @click="onSearch(1)" size="large">搜索</el-button>
        <el-button :disabled="loading" @click="onSearch(2)" size="large">重置</el-button>
      </div>
    </div>
    <div class="my-search__btn" v-if="!searchData?.noOperate">
      <span v-for="(item, index) in searchData.searchBtn">
        <el-button v-if="item.hide && item.hide(item) || !item.hide" :disabled="loading" :key="index" :type="item.type"
          size="large" @click="onClick(item)">{{
      item.text
    }}</el-button>
      </span>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { computed, watch, ref } from 'vue'
import { ColumnBtnObj } from '@/interface/index'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from '@/store'
import { ParentSearch } from '@/interface/index'
import { FunApi } from '@/global/methods'
// 父传子 默认值
const props = withDefaults(defineProps<PropsType>(), {});
const store = useStore()
const router = useRouter()
//监听加载
const loading = computed(() => {
  return store.getters['loading/getLoad']
})
//监听是否触发搜索
watch(
  () => props.isSearch,
  () => {
    onSearch(1)
  }
)
//搜索 父级传给子级 接口
interface PropsType {
  isSearch: boolean;//是否触发搜索
  searchData: ParentSearch
}

// 子传父 方法
const emit = defineEmits(['listenClick'])
//搜索 val 1搜索 2重置
const onSearch = (val: number) => {
  let params = {}
  props.searchData?.searchForm?.forEach(t => {
    if (val === 2) {
      if (t.styleType === 'checkbox' || t.styleType === 'uploads') {
        t.value = []
      } else if (t.styleType === 'switch') {
        t.value = false
      } else {
        t.value = ''
      }
    }
    params[t.key] = t.value
  })
  if (val === 2) {
    emit('listenClick', 'onSearchClear', params)
  } else {
    emit('listenClick', 'onSearch', params)
  }
}
//右边操作按钮点击
const onClick = (val: ColumnBtnObj) => {
  if (val.name === 'myApi') {
    //如果是调接口
    let arr = Object.values(val.params).filter(item => { return item })
    if (val.params && arr.length > 0) {
      onConfirm(val)
    } else {
      ElMessage({ type: 'info', message: '请先选择数据' })
    }
  } else if (val.name === 'myRouter') {
    //如果是跳转页面myRouter 走封装的跳转页面 
    router.push({ name: val.routerName })
  } else {
    //其他不走封装方法的 抛出去给父级 处理
    emit('listenClick', val.name)
  }
}
//二次确认弹窗
const onConfirm = (val: ColumnBtnObj) => {
  ElMessageBox.confirm(
    `请确定是否 ${val.text} 选中项 ?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }
  )
    .then(() => {
      //调接口公共方法
      FunApi(val.http, val.api!!, val.params, true, val.text, true)
    })
    .catch(() => {
      ElMessage({ type: 'info', message: `取消${val.text}` })
    })
}
</script>
<style scoped lang='scss'>
.my-search {
  display: flex;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 20px;

  &__box {
    display: flex;
    flex: 1;
    flex-wrap: wrap;

    &__text {
      display: flex;
      margin: 0 20px 0 0;

      &__span {
        display: block;
        line-height: 40px;
        white-space: nowrap;
        font-size: 14px;
        margin-right: 8px;
      }

      :deep(.el-input) {
        width: 200px;
        margin: 0 20px 10px 0;
      }

      :deep(.el-radio-group),
      :deep(.el-checkbox-group),
      :deep(.el-switch) {
        margin: 0 20px 10px 0;
      }

      :deep(.el-date-editor--daterange) {
        padding: 0 11px;
        width: 300px;
        margin: 0 20px 10px 0;
        flex-grow: inherit;
      }
    }

    &__btn {
      white-space: nowrap;
      margin-bottom: 10px;
    }
  }

  &__btn {
    white-space: nowrap;
    margin-bottom: 10px;

    >span {
      margin-left: 10px;
    }
  }
}
</style>